<template>
	<view class="container">
		<view class="font-s-15">
			<view v-if="has_info" style="margin: 20rpx 30rpx;font-size: 28rpx;color:#FF0000;">{{remark}}</view>
			<view class="title">个人基本信息</view>
			<view class="out-v" style="height: 100rpx;align-items: center;">
				<view class="width-75" style="flex: 1;"><text class="color-r">*</text>头像</view>
				<view class="inline-v" style="flex: 0;margin-right: 40rpx" @click="chooseImageTo" >
					<image class="avatar-image"  :src="avatar"></image>
					<text class="cell-more yticon icon-you" v-if="avatar==''" style="flex: 1;text-align: right;margin: auto;"></text>
				</view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>真实姓名</view>
				<view class="inline-v"><input class="uni-input" v-model="name" placeholder-style="font-size:12px;" placeholder="请输入真实姓名" /></view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>性别</view>
				<view class="inline-v" style="justify-content: flex-end;padding-right: 74rpx;">
					<uni-data-select v-model="sex" :clear="false" :placeholder="_selectPlace1" :localdata="sex_range"></uni-data-select>
				</view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>年龄区间</view>
				<view class="inline-v" style="justify-content: flex-end;padding-right: 74rpx;">
					<uni-data-select v-model="age" :clear="false" :placeholder="_selectPlace2" :localdata="age_range"></uni-data-select>
				</view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>联系电话</view>
				<view class="inline-v"><input class="uni-input" type="number" v-model="mobile" placeholder-style="font-size:24rpx;" placeholder="请输入联系电话" /></view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>最高学历</view>
				<view class="inline-v" style="justify-content: flex-end;padding-right: 74rpx;">
					<uni-data-select  v-model="edu_max" :clear="false" :placeholder="_selectPlace3" :localdata="edu_range"></uni-data-select>
				</view>
			</view>
			<view class="title">补充信息</view>
			<view class="out-v" style="height: 100%;">
				<view class="width-75"><text class="color-r">*</text>申请分类</view>
				<view class="inline-v" style="justify-content: flex-end;padding-right: 74rpx;">
					<!-- <uni-data-select v-model="category" :clear="false" :placeholder="_selectPlace4" :localdata="category_range"></uni-data-select> -->
					<view class="as-input" @click="openFruit" style="display: flex;">
					                        <view class="placeholder" style="font-size: 24rpx;" v-if="resultFruit==undefined||resultFruit==''">请选择</view>
					                        <view class="as-content" v-else>{{resultFruit}}</view>
					                        <uni-icons type="down" size="14" color="#c0c4cc" class="customer-icon"></uni-icons>
					</view>
					<niceui-popup-select ref="showFruit" :columns="fruits" :selectValue="fruitId" :is-search="false" :show-multiple="false"
					         :option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
				</view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>授课次数</view>
				<view class="inline-v"><input class="uni-input" type="number" v-model="num" placeholder-style="font-size:24rpx;" placeholder="请输入授课次数" /></view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>授课人数</view>
				<view class="inline-v"><input class="uni-input" type="number" v-model="person" placeholder-style="font-size:24rpx;" placeholder="请输入授课人数" /></view>
			</view>
			
			<!-- <view class="out-v" style="display: block;height: 300rpx;margin-bottom: 200rpx;font-size: 26rpx">
				<view>
					<textarea style="line-height: 2;"  placeholder="（必填）请输入个人专业、技能和特长描述，可提供的教学内容(150字以内)" v-model="intro" maxlength=150 placeholder-style="font-size:24rpx"></textarea>
				</view>
			</view> -->
			<view class="bottom-btn">
				<view class="btn" @click="applyTeacher()" :disabled="disbaoming">提交申请</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import UploadApi from '@/common/upload';
	import {mapMutations} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				avatar:'',
				has_info:false,
				disbaoming: false,
				name:'',
				mobile:'',
				edu_max:'',
				edu_range:[
					{text:'中专/技校',value:'中专/技校'},
					{text:'大专',value:'大专'},
					{text:'本科',value:'本科'},
					{text:'硕士',value:'硕士'},
					{text:'硕士及以上',value:'硕士及以上'}
				],
				// intro:'',
				_selectPlace1:'请选择',
				_selectPlace2:'请选择',
				_selectPlace3:'请选择',
				_selectPlace4:'请选择',
				age:'',
				age_range:[
					{text:'17岁及以下',value:'17岁及以下'},
					{text:'18~25岁',value:'18~25岁'},
					{text:'26~35岁',value:'26~35岁'},
					{text:'36~45岁',value:'36~45岁'},
					{text:'46~55岁',value:'46~55岁'},
					{text:'56岁及以上',value:'56岁及以上'}
				],
				sex:'',
				sex_range:[
					{text:'男',value:1},
					{text:'女',value:2},
				],
				num:'',
				category:0,
				category_range:[
					{text:'琴棋书画',value:1},
					{text:'美食厨艺',value:2}
				],
				person:'',
				remark:'',
				fruits:[
						
					],
				fruitId:[],
				fruitName:[],
			}
		},
		
		onLoad() {	
		},
		onShow(){
			this.getCategory();
			let that= this;
			setTimeout(function(){
				that.getPreInfo();
			},500)
		},
		computed:{
			resultFruit(){
				if(this.fruitName.length>0){
						return this.fruitName.join(",");
					}
			    return ''         
			    },
		},
		// destroyed() {
		// 	//新增教师资料或者编辑时都要清除登录信息，除非教师信息通过（如果通过不会进此页面，进此页面则页面关闭或者隐藏前清除信息）,因为未审核前不能使用教师再次登录
		// 	uni.removeStorage({
		// 		key: 'need_clear'  
		// 	});
		// 	this.logout()
		// },
		methods: {
			...mapMutations(['logout']),
			async getPreInfo(){
				let params ={}
				let data = await Api.apiCall('get', Api.apiName.teacher_detail, params);
				if (!data||!data.data.info||this.$api.isEmptyObject(data.data.info)) { //出错时
					return;
				}
				let res = data.data.info;
				this.name = res.name;
				this.age = res.age;
				this.sex = res.sex;
				this.mobile = res.mobile;
				this.edu_max = res.edu_max;
				// this.intro = res.intro;
				this.num = res.num;
				this.person = res.person;
				this.has_info=data.data.info?true:false;
				this.fruitId = data.data.info.category_ids;
				this.fruitName =data.data.info.category_names;
				this.avatar = res.avatar;
				if(this.has_info){
					if(data.data.info.approve_status==1){
						this.remark='审核中，请等待'
					}
					if(data.data.info.approve_status==3){
						this.remark='审核未通过，原因：'+data.data.info.approve_remark;
					}
					
				}
			},
			async applyTeacher(){
				let phoneReg =/^1[1-9][0-9]\d{8}$/;
				try{
					if(this.avatar==''){ throw '请上传头像';}
					if(this.name==''){ throw '请填写真实姓名';}
					if(this.sex==''){ throw '请选择性别';}
					if(this.age==''){ throw '请选择年龄';}
					if(this.mobile==''){ throw '请填写联系电话';}
					if(this.edu_max==''){ throw '请选择最高学历';}
					if(this.fruitId==''||this.fruitId.length==0){ throw '请选择申请分类';}
					if(this.num==''){ throw '请填写授课次数';}
					if(this.person==''){ throw '请填写授课人数';}
					// if(this.intro==''){ throw '请填写教学经历或技能简介';}
					if(!phoneReg.test(this.mobile)){ throw '联系电话格式有误';}
				}catch(err){
					
					this.$api.msg(err);
					return;
				}
				this.disbaoming = true;
				let that = this;
				uni.showModal({
					title:'确认申请该课程？',
				    content: '申请后将不能撤回，审核通过后会有消息提醒',
				    success: async (e)=>{
				    	if(e.confirm){
				    		let params = {
								avatar:that.avatar,
								name:that.name,
								sex:that.sex,
								age:that.age,
								mobile:that.mobile,
								edu_max:that.edu_max,
								// intro:that.intro,
								num:that.num,
								person:that.person,
								category_ids:that.fruitId
				    		}
				    		let data = await Api.apiCall('post', Api.apiName.teacher_save, params);
							that.disbaoming =false;
							if (!data) { //出错时
								return;
							}
							that.$api.msg(`提交成功,等待审核,审核结果前请勿重复使用教师登录`)
							
							//如果会进入此页面，则点击菜单“重新进入小程序”或以下onhide方法均要清除登录信息，因为未审核前不能使用教师再次登录，所以在提交保存信息后清除登录信息
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/campus/index'
								})
							},1500)
							
				    	}
				    }
				});
			},
			chooseImageTo(){
				let that = this;
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album','camera'], //album 从相册选图，camera 使用相机，默认二者都有
					extension:['jpg','png','jpeg'],
					success: async (res)=> {
						const images = res.tempFilePaths;
						let upRel = await UploadApi.apiUploadCall('post',UploadApi.apiName.upload_images,[images[0]],{code:111},true);
						console.log('上传结果',upRel)
						if(!upRel || upRel==false){
							this.$api.msg('上传头像失败');
							return false;
						}
						that.avatar = upRel;
					}
				});
			},
			async getCategory(){
				let params={};
				let data = await Api.apiCall('get', Api.apiName.category_list, params,true);
				if(!data){
					return;
				}
				this.fruits= data.data;
				// this.category_range=data.data;
			},
			
			openFruit(){
				this.$refs.showFruit.showPopup()
				},
			confirmFruit(value,data) {
			  this.fruitId = value
			  this.fruitName = data.map(it=>it.name)
			  this.$refs.showFruit.closePopup()
			},

		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	
	.container {
		height: 100vh;
		overflow: auto;
	}
	.title{
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 12rpx;
		background: #90bbda;
		margin: 30rpx;
	}
	.font-s-15{
		font-size: 30rpx;
	}
	.width-75{
		width: 150rpx;
	}
	.color-r{
		color: #FF0000;
	}
	.out-v{
		margin: 16rpx 30rpx;
		// border: 1px solid red;
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-left: 40rpx;
		display: flex;
	}
	.inline-v{
		text-align: right;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.uni-select{
		border: none !important;
		width: 200rpx !important;
	}
	.uni-icons{
		padding-left: 10rpx;
	}
	.uni-select__input-placeholder{
		color:#999999 !important;
	}
	.uni-select__selector{
		left: 80rpx !important;
	}
	.btn{
		padding: 20rpx;
		width: 90%;
		margin: 26rpx auto;
		border-radius: 30rpx;
		color:#FFFFFF;
		background: #0191FF;
		
	}
	.avatar-image{
		border-radius: 50%;
		height: 80rpx;
		width: 80rpx;
	}
	.box{
		border: none !important;
		width: 100% !important;
		
	}
	
	.boxli{
		float:left;
	}
	.boxulvalue{
		height: 100% !important;
		min-width: 370rpx !important;
	}
	.picker__toolbar{
		font-size: 26rpx !important;
		margin: 4rpx 32rpx !important;
	}
	.popup-content-main{
		margin: 0rpx auto 30rpx !important;
	}
	.check__all{
		margin: 4rpx 32rpx !important;
		padding: 4rpx 0rpx !important;
	}
	.check__all_left{
		font-size: 26rpx !important;
	}
	.uni-list label{
		padding: 4rpx 0rpx !important;
	}
	.cell-label{
		font-size: 26rpx !important;
	}
	.bottom-btn{
		position: absolute;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		text-align: center;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.5);
		z-index: 2;
	}
</style>